<template>
  <div class="container">
    <el-row class="topContent">
      <el-col :span="16">
        <div>
          <el-tooltip
            class="item"
            effect="dark"
            :content="projectName"
            placement="top-start"
          >
            <span class="titleTop">
              <i class="icon iconfont iconfanhui1" @click="goback"></i>
              {{
                projectName.length > 30
                  ? projectName.substring(0, 30) + '...'
                  : projectName
              }}-交易流水
            </span>
          </el-tooltip>
        </div>
      </el-col>
    </el-row>
    <div class="mainCon">
      <div class="noAccount" v-show="noAccount">
        <el-row class="noDataInfo">
          <img src="../../../static/img/noDataInfo.png" alt />
        </el-row>
        <el-row class="payOffInfoCancel">
          <p>尚未设置工资专户</p>
        </el-row>
      </div>
      <div v-show="yesAccount">
        <el-row style="padding: 0 24px">
          <div class="accountInfo">
            <el-row>
              <el-col :md="14" :lg="12" :xl="12">
                <div class="bankInfoTitle">当前专户信息</div>
                <el-row class="bankInfo">
                  <el-col :md="12" :lg="14" :xl="14">
                    <p class="color999">专户银行</p>
                    <p class="color333">{{ bankName || '--' }}</p>
                    <p class="color999 marTop">专户名称</p>
                    <p class="color333">{{ accountName || '--' }}</p>
                    <p class="color999 marTop">专户账号</p>
                    <p class="color333">{{ account || '--' }}</p>
                  </el-col>
                  <el-col :md="12" :lg="10" :xl="10">
                    <p class="color999">银行网点</p>
                    <p class="color333">{{ bankSiteName || '--' }}</p>
                    <p class="color999 marTop">专户开设凭证</p>
                    <p class="color333">
                      <span v-if="openCertificateFiles.length > 0">
                        <span>已上传</span>
                        <span class="seeFile" @click="toUploadFile()"
                          >查看</span
                        >
                        <contractEnclosureDialog
                          v-if="uploadContract"
                          dialogTitle="专户开设凭证"
                          :tableData="openCertificateFiles"
                          @closeDialog="hiddenDialog"
                        ></contractEnclosureDialog>
                      </span>
                      <span v-else>未上传</span>
                    </p>
                    <p class="color999 marTop" v-if="isCzUser()">
                      农民工工资委托发放四方协议
                    </p>
                    <p class="color999 marTop" v-else>
                      农民工工资委托发放三方协议
                    </p>
                    <p class="color333">
                      <span v-if="agreementFiles.length > 0">
                        <span>已上传</span>
                        <span class="seeFile" @click="toUploadFileTwo()"
                          >查看</span
                        >
                        <contractEnclosureDialog
                          v-if="uploadContractTwo"
                          :dialogTitle="
                            isCzUser()
                              ? '农民工工资委托发放四方协议'
                              : '农民工工资委托发放三方协议'
                          "
                          :tableData="agreementFiles"
                          @closeDialog="hiddenDialogTwo"
                        ></contractEnclosureDialog>
                      </span>
                      <span v-else>未上传</span>
                    </p>
                  </el-col>
                </el-row>
              </el-col>
              <el-col
                :md="10"
                :lg="{ span: 8, offset: 1 }"
                :xl="{ span: 8, offset: 1 }"
              >
                <div class="bankInfoTitle">项目专户统计</div>
                <div class="bankInfo">
                  <p class="color999">工资专户余额（元）</p>
                  <p class="color333 balace" style="font-size: 20px">
                    {{ balance | splitNumber }}
                  </p>
                  <div class="botBorder"></div>
                  <div class="payoff">
                    <div>
                      <p class="color999">总缴纳（元）</p>
                      <p class="color333">{{ payTotal | splitNumber }}</p>
                    </div>
                    <div>
                      <p class="color999">总支出（元）</p>
                      <p class="color333">{{ expensesTotal | splitNumber }}</p>
                    </div>
                  </div>
                  <!-- 如果项目有多个专户 -->
                  <p class="moreAccount" v-if="accountList.length > 1">
                    本项目曾使用多个专户
                    <el-link type="primary" @click="lookAccountList"
                      >查询各专户缴存情况&gt;&gt;</el-link
                    >
                  </p>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-row>
        <div class="spacing" style="margin-top: 24px"></div>
        <operateListTab
          @getSelected="getCurrentTabComponent"
          :groupList="groupList"
          :tabIndex="tabIndex"
          style="margin: 24px 0"
          class="tabSty"
        ></operateListTab>
        <div class="commomPaddingComtainer">
          <keep-alive>
            <component
              v-bind:is="currentTabComponent"
              @func="getmsg($event)"
              :projectId="projectId"
              :accountCode="accountCode"
              :bankId="bankId"
              :isShowImport="isShowImport"
              :projectName="projectName"
            ></component>
          </keep-alive>
        </div>
      </div>
      <!-- 查询使用过的专户列表 -->
      <el-dialog
        title="各专户缴存情况"
        :visible.sync="showAccountList"
        :close-on-click-modal="false"
        @close="manualHandleCloseForm"
        custom-class="dialog-minwidth"
        :modal-append-to-body="false"
        width="600px"
      >
        <div class="dialogAccount">
          <div v-for="item in accountList" :key="item.id" class="items">
            <div class="account">
              专户账号({{ item.account }})
              <span
                :class="
                  item.account == item.currentAccount
                    ? 'dialogTag success'
                    : 'dialogTag warning'
                "
                effect="dark"
              >
                {{
                  item.account == item.currentAccount ? '当前专户' : '历史专户'
                }}
              </span>
            </div>
            <el-row>
              <el-col :span="12"
                ><div class="in">
                  <span>期间缴纳</span><span>￥{{ item.payTotal }}</span>
                </div></el-col
              >
              <el-col :span="12"
                ><div class="out">
                  <span>期间支出</span><span>￥{{ item.expensesTotal }}</span>
                </div></el-col
              >
            </el-row>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import operateListTab from '@/components/publicCom/operateListTab'
import newSalarySpecialAccount from '@/components/specialAccount/newSalarySpecialAccount'
import bankPushFlow from '@/components/specialAccount/bankPushFlow'

export default {
  name: 'czNewCompanyAccountDetail',
  components: {
    operateListTab,
    newSalarySpecialAccount,
    bankPushFlow,
  },
  data() {
    return {
      isShowBtn: true,
      projectId: '',
      projectName: '',
      accountCode: '',
      bankId: '',
      path: '', //跳转过来的路径
      heFengProject: '',
      loginType: '',
      bankName: '', //专户银行
      bankSiteName: '', //银行网点名称
      account: '', //专户账号
      balance: '', //专户余额
      payTotal: '', //专户总缴纳
      expensesTotal: '', //专户总支出
      tipsInfo: '',
      openCertificateFiles: [], //专户开设凭证
      agreementFiles: [], //农民工工资委托发放三方协议
      uploadContract: false,
      uploadContractTwo: false,
      isShowImport: '',
      groupList: [
        { name: '手工导入流水', componentName: 'newSalarySpecialAccount' },
        { name: '银行推送流水', componentName: 'bankPushFlow' },
      ],
      tabIndex: '0',
      currentTabComponent: 'newSalarySpecialAccount',

      showAccountList: false,
      accountList: [],
      accountName: '',
    }
  },
  created() {
    this.projectId = this.$route.query.projectId
    this.projectName = this.$route.query.projectName
    this.accountCode = this.$route.query.account
    this.bankId = this.$route.query.bankId
    this.getAcountInfo()
    this.getAccountList()
  },
  mounted() {},
  methods: {
    //查看各专户缴存情况
    lookAccountList() {
      this.showAccountList = true
    },
    //关闭弹窗
    cancelAccountList() {
      this.showAccountList = false
      this.accountList = []
    },
    // 获取子组件上传成功后的值
    getCurrentTabComponent(data) {
      this.currentTabComponent = data.componentName
    },
    getmsg(data) {
      if (data === 'secondTab') {
        this.tabIndex = '1'
        this.currentTabComponent = 'paymentRatio'
      }
    },
    getAcountInfo() {
      var url
      url = 'api-acc/account/expand/accountdetail'
      this.axios({
        method: 'post',
        url: url,
        data: {
          projectId: this.projectId,
        },
      }).then((response) => {
        if (!response.data.hasError) {
          var data = response.data.result
          if (!data.account) {
            this.noAccount = true
          } else {
            this.yesAccount = true
          }
          this.bankName = data.bankName
          this.bankSiteName = data.bankSiteName ? data.bankSiteName : ''
          this.account = data.account
          this.balance = data.balance
          this.payTotal = data.payTotal
          this.expensesTotal = data.expensesTotal
          this.projectName = data.projectName
          this.pbName = data.pbName
          this.bankId = data.bankId
          this.openCertificateFiles = data.openCertificateFiles
          this.agreementFiles = data.agreementFiles
          this.accountName = data.accountName
          if (this.isYcUser() && this.balance * 1 < 0) {
            this.tipsInfo =
              '流水数据不完整，请联系施工企业登录系统及时分配流水。'
          } else {
            this.tipsInfo = ''
          }
          this.isShowImport = data.isCancellation
        }
      })
      // .catch((error) => {
      //   this.$message.error("专户数据获取失败");
      // });
    },
    //获取专户账号列表
    getAccountList() {
      this.axios
        .post('api-acc/account/expand/findallaccinfo', {
          projectId: this.projectId,
        })
        .then((res) => {
          if (!res.data.hasError) {
            this.accountList = res.data.result
          }
        })
    },
    toUploadFile() {
      this.uploadContract = true
    },
    hiddenDialog() {
      this.uploadContract = false
    },
    toUploadFileTwo() {
      this.uploadContractTwo = true
    },
    hiddenDialogTwo() {
      this.uploadContractTwo = false
    },
    goback() {
      //从项目详情页面-管理专户跳转过来的
      this.$router.push('/home/specialAccount/czSpecialAccountList')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/specialAccount/czSpecialAccountList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
.container {
  .topContent {
    background: #fff;
    height: 50px;
    line-height: 50px;
    padding: 0 24px;
    // margin: 24px;
    position: relative;
    &:after {
      width: 100%;
      position: absolute;
      right: 0;
      top: 50px;
      left: 0;
      height: 1px;
      content: '';
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      background-color: #e3e7e9;
      z-index: 10;
    }
    .titleTop {
      font: bold 18px Microsoft YaHei;
      color: #333333;
    }
    .alignRight {
      text-align: right;
    }
    .createSalaryBut {
      background: #009588;
      border: 1px solid #009588;
      padding: 9px 23px;
      &:hover {
        opacity: 0.8;
      }
    }
  }
  .mainCon {
    top: 198px;
    .noAccount {
      padding-top: 60px;
      text-align: center;
      color: #666666;
      .noDataInfo {
        margin-top: 16px;
      }
    }
    .accountInfo {
      .bankInfoTitle {
        font-size: 16px;
        line-height: 32px;
        color: #333;
        font-weight: 700;
      }
      .bankInfo {
        height: 212px;
        padding: 15px 33px;
        border: 1px solid #dee5f4;
        .balace {
          font-size: 24px;
        }
        .color999 {
          font-size: 14px;
        }
        .color333 {
          font-size: 14px;
          line-height: 34px;
        }
        .marTop {
          margin-top: 14px;
        }
        .botBorder {
          width: 100%;
          height: 1px;
          background: #dee5f4;
          margin: 16px 0;
        }
        .payoff {
          div {
            width: 40%;
            display: inline-block;
          }
        }
        .moreAccount {
          font-size: 14px;
          line-height: 16px;
          height: 16px;
          color: #666;
          vertical-align: text-bottom;
        }
      }
    }
  }
}
.dialogAccount {
  overflow-y: auto;
  .items {
    border-radius: 5px;
    padding: 16px;
    background-color: #f5f7f9;
    position: relative;
    line-height: 30px;
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
    .account {
      font-weight: 600;
      font-size: 16px;
      color: #000;
    }
    .dialogTag {
      display: inline-block;
      height: 20px;
      line-height: 20px;
      padding: 0 8px;
      font-weight: normal;
      font-size: 12px;
      margin-left: 15px;
      vertical-align: middle;
    }
    .success {
      color: #fff;
      background-color: #6dd400;
    }
    .warning {
      color: #fff;
      background-color: #ffc100;
    }
    .in,
    .out {
      span {
        display: block;
        &:first-child {
          font-size: 14px;
          color: #999;
        }
        &:last-child {
          font-size: 16px;
          color: #333;
        }
      }
    }
  }
}
.tabSty /deep/ .tabsContainer .el-radio-button__inner {
  width: 100px !important;
}
</style>
